<template>
	<view class="order-item bg-white radius-16 padding-sm margin-bottom-sm">
		<!-- 订单头部-订单编号&订单状态-开始 -->
		<view class="flex align-center justify-between text-666">
		  <view class="text-666 fu-fs28">
		    <text v-if="item.send_type != 1">{{ i18n['订单编号'] }}: {{ item.order_sn }}</text>
		    <view v-else class="flex align-center">
		      <image class="width-40 height-30" :src="imgWechatUrl+'/order/address_3.png'" mode=""></image>
		      <text>{{i18n['自取订单']}}</text>
		    </view>
		  </view>
		  <view>
		    <text v-if="item.send_type != 1" class="text-theme">{{ item.status | filterStatus }}</text>
		    <text v-else class="text-theme">{{ item.status | filterInviteStatus }}</text>
		  </view>
		</view>
		<!-- 订单头部-订单编号&订单状态-结束 -->
		<!-- 订单商品开始 -->
		<view class="padding-tb solid-bottom" @tap.stop="navToOrderDetail(item, index)">
			<block v-for="(goodsItem, goodsIndex) in item.goods" :key="goodsIndex">
				<view class="flex align-stretch padding-bottom-sm">
					<view class="width-200 height-200 margin-right-sm">
						<fu-image :src="goodsItem.goods_thumb" radius="8" mode="aspectFill"></fu-image>
					</view>
					<view class="flex-sub flex flex-direction justify-between" style="min-width: 1px;">
						<view>
							<view class="text-cut-2 text-333 text-bold fu-fs28">{{ goodsItem.goods_name }}</view>
							<view class="fu-fs24 text-999 text-cut margin-top-xs">{{ goodsItem.sku_name }}</view>
						</view>
						<view class="text-right" v-if="goodsItem.order_refund_status == -2"
						  style="color: rgb(247, 173, 50); font-size: 24rpx">{{ i18n['售后取消'] }}</view>
						<view class="text-right" v-if="goodsItem.order_refund_status == -1"
						  style="color: rgb(247, 173, 50); font-size: 24rpx">{{ i18n['申请驳回'] }}</view>
						<view class="text-right" v-if="goodsItem.order_refund_status == 0"
						  style="color: rgb(247, 173, 50); font-size: 24rpx">{{ i18n['售后中'] }}</view>
						<view class="text-right" v-if="goodsItem.order_refund_status == 3"
						  style="color: rgb(247, 173, 50); font-size: 24rpx">{{ i18n['退款成功'] }}</view>
						<view class="text-right" v-if="goodsItem.order_refund_status == 2"
						  style="color: rgb(247, 173, 50); font-size: 24rpx">{{ i18n['商家确认收货'] }}</view>
						<view class="text-right" v-if="goodsItem.order_refund_status == 1"
						  style="color: rgb(247, 173, 50); font-size: 24rpx">{{ i18n['同意申请'] }}</view>
						<view class="text-right" v-if="goodsItem.order_refund_status == -999"
						  style="color: rgb(247, 173, 50); font-size: 24rpx">{{ i18n['申请售后'] }}</view>
						<view class="flex justify-between align-center">
						  <text class="text-theme text-bold">
						    <text class="text-price fu-fs20"></text>
						    <text class="fu-fs32">{{ goodsItem.shop_price | filterPriceInt}}.</text>
						    <text class="fu-fs22">{{ goodsItem.shop_price | filterPriceFloat}}</text>
						  </text>
						  <text class="fu-fs24 text-999">x {{ goodsItem.num }}</text>
						</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 订单商品结束 -->
		<!-- 操作按钮开始 -->
		<view class="padding-top">
			<view class="flex align-center justify-end">
			  <text class="fu-fs24 text-666">{{i18n['共']}}</text>
			  <text class="fu-fs24 text-666">{{num}}</text>
			  <text class="fu-fs24 text-666">{{i18n['件商品']}}</text>
			  <text class="fu-fs24 margin-lr-xs text-666">{{i18n['实付款']}}</text>
			  <text class="text-bold text-theme">
			    <text class="text-price fu-fs20"></text>
			    <text class="fu-fs32">{{ item.payable_money | filterPriceInt}}.</text>
			    <text class="fu-fs22">{{ item.payable_money | filterPriceFloat}}</text>
			  </text>
			</view>
			<view class="flex align-center justify-end margin-top">
				<button
					class="round width-170 height-60 fu-fs24 margin-left-sm btn cu-btn"
					v-if="isContentShow([0], item.status)"
					@tap.stop="showCancelReason">
					{{ i18n['取消订单'] }}
				</button>
				<view
					class="round width-170 height-60 fu-fs24 margin-left-sm text-center line-height-60  bg-theme text-white"
					v-if="isContentShow([0], item.status)"
					@tap.stop="toPay">
					{{ i18n['去付款'] }}
				</view>
				<button
				class="round width-170 height-60 fu-fs24 margin-left-sm btn cu-btn"
				v-if="isContentShow([-2, -1, 4, 6, 7], item.status)"
				@tap.stop="delOrder">
					{{ i18n['删除订单'] }}
				</button>
				<button
					class="round width-170 height-60 fu-fs24 margin-left-sm btn cu-btn"
					v-if="isContentShow([2], item.status) && item.send_type != 1"
					@tap.stop="seelogs">
					{{ i18n['查看物流'] }}
				</button>
				<button
					class="round width-170 height-60 fu-fs24 margin-left-sm btn cu-btn"
					v-if="isContentShow([1, 2, 3, 4], item.status) && item.stop_refund == 0"
					@tap.stop="navToOrderDetail(item, index)">
					{{ i18n['申请售后'] }}
				</button>
				<view
					class="round width-170 height-60 fu-fs24 margin-left-sm text-center line-height-60  bg-theme text-white"
					v-if="isContentShow([1], item.status) && item.is_remind.info == 0"
					@tap.stop="remindOrder">
					{{ i18n['提醒发货'] }}
				</view>
				<button
					class="round width-170 height-60 fu-fs24 margin-left-sm btn cu-btn"
					v-if="isContentShow([1], item.status) && item.is_remind.info == 1"
					disabled="false">
					{{ i18n['已提醒'] }}
				</button>
				<view
					class="round width-170 height-60 fu-fs24 margin-left-sm text-center line-height-60  bg-theme text-white"
					v-if="isContentShow([2], item.status)"
					@tap.stop="receiveOrder()">
					{{ i18n['确认收货'] }}
				</view>
				<view
					class="round width-170 height-60 fu-fs24 margin-left-sm text-center line-height-60  bg-theme text-white"
					v-if="isContentShow([3], item.status)"
					@tap.stop="evaluateOrder">
					{{ i18n['评价'] }}
				</view>
				<button
					class="round width-170 height-60 fu-fs24 margin-left-sm btn cu-btn"
					v-if="isContentShow([6], item.status)"
					@tap.stop="navToOrderDetail(item, index)">
					查看详情
				</button>
			</view>
		</view>
		<!-- 操作按钮结束 -->
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default() {
				  return {};
				}
			},
			index: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				imgWechatUrl: this.imgWechatUrl,
			}
		},
		computed: {
			num() {
				let num = 0;
				if (this.item.goods && this.item.goods.length > 0) {
					this.item.goods.forEach(item => {
						num += item.num;
					})
				}
				return num;
			}
		},
		methods: {
			/**
			 * @description 取消订单
			 * @param {String} item = 订单列表项
			 * @param {Number} index = 当前订单在列表中的索引
			 * */
			showCancelReason() {
				this.$emit('showCancelReason', {item: this.item, index: this.index});
			},
			/**
			 * @description 去支付
			 * @param {string} sn = 订单号
			 * @param {Number} type = 订单类型
			 * */
			toPay() {
			  this.$urouter.navigateTo({
			    url: '/pages/order/order-process/pay-order/index',
			    params: {
			      order_sn: this.item.order_sn,
			      order_type: this.item.order_type,
						itemIndex: this.index
			    }
			  });
			},
			/**
			 * @description 删除订单
			 * @param {Object} item = 当前订单项对象
			 * @param {Number} index = 当前订单在列表中的索引
			 */
			delOrder() {
			  this.$util.showModal({
			    title: this.i18n['确认删除此订单?'],
			    content: this.i18n['删除后不可恢复'],
			    success: res => {
			      if (res.confirm) {
			        this.$api.post(global.apiUrls.postDelOrder, {
								order_sn: this.item.order_sn
							}).then(result => {
								if (result.data.code == 1) {
									this.$message.info(this.i18n['删除成功']);
									uni.$emit('onPageUpdata', {
										type: 4, // 1: 取消订单， 2: 提醒发货， 3: 确认订单， 4: 删除订单
										index: this.index,
									})
								} else {
									this.$message.info(data.msg);
								}
							}).catch(err => {
								this.$message.info('服务器错误，请稍后重试');
							});
			      }
			    }
			  });
			},
			// 提醒发货
			remindOrder() {
			  this.$api.post(global.apiUrls.postRemindShipment, {
					order_sn: this.item.order_sn
				}).then(res => {
					if (res.data.code == 1) {
						this.$message.info(this.i18n['已提醒,请耐心等待']);
						uni.$emit('onPageUpdata', {
							type: 2, // 1: 取消订单， 2: 提醒发货， 3: 确认订单， 4: 删除订单
							index: this.index,
						})
					} else {
						this.$message.info(res.data.msg);
					}
				}).catch(err => {
					this.$message.info('服务器错误，请稍后重试');
				});
			},
			/**
			 * @description 确认收货
			 * @param {Object} item = 当前订单项对象
			 * @param {Number} index = 当前订单在列表中的索引
			 * */
			receiveOrder() {
			  this.$util.showModal({
			    title: this.i18n['提示'],
			    content: this.i18n['您是否确认收到货物?'],
			    success: res => {
			      if (res.confirm) {
			        this.$api.post(global.apiUrls.postConfirmOrder, {
								order_sn: this.item.order_sn
							}).then(res => {
								this.$message.info(res.data.msg);
								if (res.data.code == 1) {
									uni.$emit('onPageUpdata', {
										type: 3, // 1: 取消订单， 2: 提醒发货， 3: 确认收货， 4: 删除订单
										index: this.index,
									})
								} else {
									
								}
							}).catch(err => {
								this.$message.info('服务器错误，请稍后重试');
							});
			      }
			    }
			  });
			},
			
			seelogs() {
				this.$urouter.navigateTo({
				  url: '/pages/order/orderdetail/express-delivery/index',
				  params: {
				    order_sn: this.item.order_sn
				  }
				});
			},
			/**
			 * @description 查看订单详情
			 * @param {String} item = 订单列表项
			 * @param {Number} index = 当前订单在列表中的索引
			 * */
			navToOrderDetail(item, index) {
			  this.$urouter.navigateTo({
			    url: '/pages/order/orderdetail/order-detail/index',
			    params: {
			      order_sn: item.order_sn,
			      order_type: item.order_type,
			      itemIndex: index
			    }
			  });
			},
			/**
			 * @description 去评价
			 * @param {string} item = 订单列表项
			 * */
			evaluateOrder() {
			  uni.setStorageSync('order_goods_list', JSON.stringify(this.item.goods));
			  this.$urouter.navigateTo({
			    url: '/pages/order/evaluation/order-evaluation/index',
			    params: {
			      order_sn: this.item.order_sn,
			      order_type: this.item.order_type,
						itemIndex: this.index
			    }
			  });
			},
			/**
			 * @description 判断内容是否显示
			 * @param {String} arr = 要判端数组
			 * @param {String | Number} val = 要判的值
			 */
			isContentShow(arr, val) {
			  return arr.includes(val * 1);
			},
		},
		filters: {
		  // 订单状态过滤器  status每个值代表的状态
		  filterStatus(val) {
		    switch (val) {
		      case 0:
		        return global.i18n['待付款'];
		      case 1:
		        return global.i18n['待发货'];
		      case 2:
		        return global.i18n['待收货'];
		      case 3:
		        return global.i18n['待评价'];
		      case 4:
		        return global.i18n['交易成功'];
					case 5:
						return global.i18n['售后中'];
		      case 6:
		        return global.i18n['售后已完成'];
		      case -1:
		        return global.i18n['交易关闭'];
					case -2:
					  return global.i18n['已取消'];
		      default:
		        return '';
		    }
		  },
		  // 自提状态过滤器
		  filterInviteStatus(val) {
		    switch (val) {
		      case 0:
		        return '待付款';
		      case 1:
		        return '待取货';
		      case 2:
		        return '待取货';
		      case 3:
		        return '提货成功';
		      case 4:
		        return '交易成功';
		      case 6:
		        return '售后中';
		      case 7:
		        return '售后已完成';
		      case -1:
		        return '交易关闭';
		      default:
		        return '';
		    }
		  },
		  filterPriceInt(val){
		    if(!val) return "";
		    return val.toString().split('.')[0];
		  },
		  filterPriceFloat(val){
		    if(!val) return "";
		    return val.toString().split('.')[1];
		  },
		}
	}
</script>

<style scoped lang="scss">
	.order-item {
		.btn {
		  color: #333;
		  background-color: #f6f6f6;
			&:last-child {
				color: #fff;
				background: $bgtheme;
			}
		}
	}
</style>
